<template>
    <div class="index">
        <div>
            <ul class="infoList">
                <li v-for="(item,index) in infoList" :key="index">
                    <div>
                        <p>{{item.title}}</p>
                        <p>{{item.content}}</p>
                    </div>
                    <div>
                        {{item.createTime}}
                    </div>
                </li>
            </ul>
        </div>
        <div>
            <el-pagination
                :hide-on-single-page="value"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="pageList"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<style>
.index{
    width: 800px;
    margin: 0 auto;
}
.infoList > li {
    width: inherit;
    height: 68px;
    margin: 8px 0;
    cursor: pointer;
    box-shadow: 0 0 2px #ff7200d6;
}
.infoList > li:hover {
    background: #04ebfe;
    color: white;
}
.infoList > li > div {
    float: left;
}
.infoList > li > div:first-child {
    width: 80%;
    padding: 0 30px;
}
.infoList > li > div:first-child > p {
    line-height: 34px;
}
.infoList > li > div:last-child {
    text-align: center;
    line-height: 68px;
}
</style>

<script>
export default {
    data() {
        return {
            currentPage: 4,
            pageSize: 100,
            total: 400,
            value: true,
            pageList: [100, 200, 300, 400],
            infoList:[
                {
                    title: '第一次',
                    content: "哈哈，终于可以自测了",
                    createTime: '2023-12-12 12:23:43'
                },
                {
                    title: '第二次',
                    content: "哈哈，第二次终于可以自测了",
                    createTime: '2023-12-12 12:23:43'
                }
            ]
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
        }
    }
}
</script>
